<template>
  <div class="information-warp">
    <div class="information-top">
      <span class="top-content">全部商品（{{ currentCount }}）</span>
      <span class="top-content1">已上架（{{ onNo }}）</span>
      <span class="top-content1">未上架（{{ onNo1 }}）</span>
    </div>
    <!-- 筛选信息 -->
    <div class="information-query">
      <div class="query-nav clear">
        <div class="query-nav-left">
          <i class="el-icon-search"></i>
          <span>筛选查询</span>
        </div>
        <div class="query-nav-right">
          <span @click="shouqi" class="shou"
            ><i
              :class="{ 'el-icon-arrow-up': tab, 'el-icon-arrow-down': !tab }"
            ></i
            >收起筛选</span
          >
          <el-button class="top-btn" @click="dialogFormVisible = true"
            >高级检索</el-button
          >
          <!-- 高级检索的表格 -->
          <el-dialog title="高级检索" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :inline="true" ref="ruleForm">
              <el-form-item
                label="商品类型"
                :label-width="formLabelWidth"
                prop="goodsType"
              >
                <el-select v-model="ruleForm.type" placeholder="请选择类型">
                  <el-option
                    v-for="item in selec"
                    :key="item.value"
                    :label="item.label"
                    :value="item.goodsType"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="商品品牌"
                :label-width="formLabelWidth"
                prop="brandName"
              >
                <el-select v-model="ruleForm.name" placeholder="请选择品牌">
                  <el-option
                    v-for="item in selec"
                    :key="item.value"
                    :label="item.label"
                    :value="item.brandName"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="厂商名称"
                :label-width="formLabelWidth"
                prop="factory"
              >
                <el-select v-model="ruleForm.factory" placeholder="请选择厂商">
                  <el-option
                    v-for="item in selec"
                    :key="item.value"
                    :label="item.label"
                    :value="item.factory"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="上下架"
                :label-width="formLabelWidth"
                prop="isUsed"
              >
                <el-select v-model="ruleForm.isUsed" placeholder="上下架">
                  <el-option label="上架" value="上架"></el-option>
                  <el-option label="下架" value="下架"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="resetForm('form')">重置</el-button>
              <el-button type="primary" @click="higtBtn">开始检索</el-button>
            </div>
          </el-dialog>

          <el-button @click="searchBtn" class="top-btn">查询结果</el-button>
        </div>
      </div>

      <!-- 搜索的内容 -->
      <div class="query-content" :class="{ 'header-from1': tab }">
        <el-form
          :inline="true"
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="商品名称:" prop="name">
            <el-input v-model="ruleForm.name" placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item label="商品类型：" prop="goodsType">
            <el-select
              clearable
              v-model="ruleForm.type"
              placeholder="请选择商品类型"
            >
              <el-option
                v-for="item in selec"
                :key="item.value"
                :label="item.label"
                :value="item.goodsType"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品品牌：" prop="brandName">
            <el-select
              clearable
              v-model="ruleForm.brand"
              placeholder="请选择商品品牌"
            >
              <el-option
                v-for="item in selec"
                :key="item.value"
                :label="item.label"
                :value="item.brandName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 数据列表 -->
    <div class="information-table">
      <div class="table-nav">
        <span class="el-icon-s-operation">数据列表</span>
        <div class="table-nav-btn">
          <el-button @click="addGoods">添加商品</el-button>
          <el-button @click="lead">导入</el-button>
          <el-button @click="output">导出</el-button>
          <el-select
            v-model="value"
            placeholder="显示条数"
            style="margin-left: 5px"
            class="list-select"
            @change="handerRow"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="valued"
            clearable
            placeholder="排序方式"
            style="margin-left: 5px"
            class="list-select"
            @change="sortFunction(sort)"
          >
            <el-option label="升序" value="升序"> </el-option>
            <el-option label="降序" value="降序"> </el-option>
          </el-select>
        </div>
      </div>
      <div class="table-list">
        <el-table
          ref="multipleTable"
          :data="tableData"
          border
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="商品编号"> </el-table-column>
          <el-table-column prop="name" label="商品名称"> </el-table-column>
          <el-table-column prop="costPrice" label="成本价格"> </el-table-column>
          <el-table-column prop="norms" label="规格"> </el-table-column>
          <el-table-column prop="factory" label="厂商名称"> </el-table-column>
          <el-table-column prop="brandName" label="品牌名称"> </el-table-column>
          <el-table-column prop="goodsType" label="商品类型"> </el-table-column>
          <el-table-column prop="bigUnit" label="大单位"> </el-table-column>
          <el-table-column prop="smallUnit" label="小单位"> </el-table-column>
          <el-table-column prop="isUsed" label="状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isUsed"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="stateChange(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="delInformation(scope.row.id)" type="text">
                删除
              </el-button>
              <el-button type="text" @click="editGoods(scope.row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="information-footer">
        <div class="pag">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="currentCount"
            @current-change="toPage"
            :page-size="value"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 导入预览 -->
    <el-dialog title="导入预览" :visible.sync="dialogTableVisible">
      <span style="font-size: 12px; color: #666666">只显示前10条</span>
      <el-table :data="ImportData">
        <el-table-column prop="name" label="商品名称"> </el-table-column>
        <el-table-column prop="costPrice" label="成本价格"> </el-table-column>
        <el-table-column prop="norms" label="规格"> </el-table-column>
        <el-table-column prop="factory" label="厂商名称"> </el-table-column>
        <el-table-column prop="brandName" label="品牌名称"> </el-table-column>
        <el-table-column prop="goodsType" label="商品类型"> </el-table-column>
        <el-table-column prop="bigUnit" label="大单位"> </el-table-column>
        <el-table-column prop="smallUnit" label="小单位"> </el-table-column>
        <el-table-column prop="isUsed" label="状态"> </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="addImport">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import {
  informationApi,
  delList,
  pageInformation,
  sortApi,
  selsetTwoApi,
  lowApi,
  isUsedApi,
  seniorApi,
  leadApi,
  outputApi,
} from "@/http/commodity-management/informationApi";
import { ImportExcel, fileExport } from "@/util/export";
export default {
  name: "InformationView",
  data() {
    return {
      selec: [],
      tableData: [],
      ImportData: [],
      current: 1, //当前页
      size: 10, //当前页展示数量
      pageTatol: 1,
      options: [
        {
          value: 3,
          label: "3条",
        },
        {
          value: 5,
          label: "5条",
        },
        {
          value: 10,
          label: "10条",
        },
      ],
      value: 10,
      valued: "",
      currentCount: 0,
      tab: true,
      dialogFormVisible: false,
      dialogTableVisible: false,
      ruleForm: {
        factory: "",
        type: "",
        brand: "",
        isUsed: "",
        name: "",
      },
      formLabelWidth: "80px",
      onNo: 0,//已上架
      onNo1: 0,//未上架
      arr: [
        "name",
        "costPrice",
        "bigUnit",
        "brandName",
        "factory",
        "goodsType",
        "isUsed",
        "norms",
        "smallUnit",
      ],
    };
  },
  mounted() {
    this.currentCount = this.$refs.total;
  },
  methods: {
    addGoods() {
      this.$router.push({ path: "/goods/informationAdd" });
    },
    editGoods(row) {
      this.$router.push({ path: "/goods/editGoods", query: { obj: row } });
      console.log("编辑的id", row.id);
    },
    delInformation(id) {
      console.log("删除的id：", id);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delList(id);
          this.renderPag();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    renderPag(page, size) {
      //渲染页面
      informationApi()
        .then((res) => {
          // console.log(res);
          this.currentCount = res.data.number;
          var on = 0,
            no = 0;
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].isUsed == true) {
              ++on;
              this.onNo = on;
            } else {
              ++no;
              this.onNo1 = no;
            }
          }
        })
        .catch((err) => {
          console.log("页面加载失败", err);
        });
      pageInformation({ page, size })
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log("请求失败：", err);
        });
    },
    toPage(curr) {
      //当前页数
      this.renderPag(curr, this.size);
      // console.log(curr);
    },
    handerRow(page) {
      //显示条数
      // console.log(page);
      this.renderPag(this.current, this.value, page);
    },
    sortFunction() {
      //排序
      sortApi(this.valued)
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log("获取失败", err);
        });
    },
    shouqi() {
      this.tab = !this.tab;
    },
    searchBtn() {
      //低级检索
      this.$emit("sss");
      lowApi(this.ruleForm)
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.data;
          this.currentCount = res.data.data.length;
        })
        .catch((err) => {
          console.log("搜索失败", err);
        });
      this.$refs.ruleForm.resetFields();
    },
    selectSort() {
      //下拉框
      selsetTwoApi()
        .then((res) => {
          this.selec = res.data.data;
          // console.log(this.selec);
        })
        .catch((err) => {
          console.log("获取失败", err);
        });
    },
    stateChange(row) {
      //上下架
      isUsedApi(row)
        .then((res) => {
          console.log(res);
          this.renderPag();
        })
        .catch((err) => {
          console.log("上架失败", err);
        });
    },
    resetForm() {
      //重置
      (this.ruleForm = {
        factory: "",
        type: "",
        brand: "",
        isUsed: "",
        name: "",
      }),
        this.$refs["ruleForm"].resetFields();
    },
    higtBtn() {
      //高级检索
      this.dialogFormVisible = false;
      seniorApi(this.ruleForm)
        .then((res) => {
          // console.log("请求成功", res);
          this.tableData = res.data.data;
          this.currentCount = res.data.data.length;
        })
        .catch((err) => {
          console.log("查找失败", err);
        });
    },
    async lead() {
      // 导入预览
      ImportExcel(this.arr, (data) => {
        this.importDataAll = data;
        if (data.length <= 10) {
          this.ImportData = data;
        } else {
          this.ImportData = data.slice(0, 9);
        }
        this.$nextTick(() => {
          this.dialogTableVisible = true;
        });
      });
    },
    async addImport() {
      //导入
      this.dialogTableVisible = false;
      let data = await leadApi(this.importDataAll);
      console.log(data);
      if (this.code == 200) {
        this.$message({
          message: "导入成功",
          type: "success",
        });
      } else {
        this.$message.error("导入失败");
      }
    },
    output() {
      //导出
      outputApi()
        .then((res) => {
          console.log(res);
          fileExport(res.data, "商品列表");
        })
        .catch((err) => {
          console.log("导出失败", err);
        });
    },
  },
  activated() {
    //调用渲染页面的函数
    this.renderPag(this.current, this.pageSize);
    this.selectSort();
  },
  updated() {
    // this.renderPag();
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/sass/var.scss";
.information-warp {
  .information-top {
    margin-bottom: 20px;
    .top-content {
      margin-right: 10px;
      width: 120px;
      padding: 8px 4px;
      color: $text-color;
      background: $panel-color;
      border: 1px solid rgb(228, 228, 228);
    }
    .top-content1 {
      margin-right: 10px;
      width: 120px;
      padding: 8px 4px;
      color: #999;
      border: 1px solid rgb(228, 228, 228);
      &:hover {
        color: $panel-color;
      }
    }
  }
  .information-query {
    background-color: rgba(243, 243, 243);
    border: 1px solid rgb(228, 228, 228);
    span {
      color: #666;
      size: 14px;
    }
    & .query-nav {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      border: 1px solid rgb(217, 217, 217);
      background-color: rgb(232, 232, 232);
      border-bottom: none;
    }
    & .query-nav-left {
      float: left;
    }
    & .query-nav-right {
      float: right;
    }
    & .query-content {
      height: 0px;
      overflow: hidden;
      transition: all 0.5s;
      // line-height: 50px;
      .demo-ruleForm {
        margin-top: 5px;
      }
    }
    & .header-from1 {
      height: 50px;
    }
    & .demo-form-inline {
      margin-top: 10px;
    }
    & .shou {
      cursor: pointer;
      margin-right: 20px;
    }
    .top-btn {
      float: right;
      margin-top: 4px;
    }
    .button-input {
      width: 180px;
      line-height: 50px;
    }
  }
  .information-table {
    margin-top: 20px;
    .table-nav {
      border: 1px solid rgb(228, 228, 228);
      line-height: 50px;
      padding: 0 20px;
      background-color: rgba(243, 243, 243);

      span {
        color: #999;
        size: 14px;
        font-weight: 500;
      }
      .table-nav-btn {
        float: right;
        .list-select {
          width: 120px;
        }
      }
    }
    .information-footer {
      border: 1px solid rgb(228, 228, 228);
      height: 50px;
      box-sizing: border-box;
      width: 100%;
      .pag {
        margin-top: 8px;
        float: right;
      }
    }
    .information-footer ::v-deep .active {
      background-color: $panel-color !important;
    }
  }
}
</style>
